<template>
  <!-- 统计看板 -->
  <div class="project-type-statistics-board">
    <el-row class="project-type-statistics-board-item">
      <el-col :span="8">
        <div class="item-value">{{ listQueryData.totalTaskCount }}</div>
        <div class="item-name">{{ $t('common.projectManage.detail.statistics.text1') }}</div>
      </el-col>
      <el-col :span="8">
        <div class="item-value">{{ listQueryData.finishedTaskCount }}</div>
        <div class="item-name">{{ $t('common.projectManage.detail.statistics.text2') }}</div>
      </el-col>
      <el-col :span="8">
        <div class="item-value">{{ listQueryData.unFinishedTaskCount }}</div>
        <div class="item-name">{{ $t('common.projectManage.detail.statistics.text3') }}</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="item-value">{{ listQueryData.memberNumber }}</div>
        <div class="item-name">{{ $t('common.projectManage.detail.statistics.text4') }}</div>
      </el-col>
      <el-col :span="8">
        <div class="item-value">{{ listQueryData.totalCostTime }}</div>
        <div class="item-name">{{ $t('common.projectManage.detail.statistics.text5') }}</div>
      </el-col>
      <el-col :span="8">
        <div class="item-value">{{ listQueryData.totalExpectWorkTime }}</div>
        <div class="item-name">{{ $t('common.projectManage.detail.statistics.text6') }}</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { projectStatisticData } from '@src/api/ProjectManage.ts';

import { toast } from '@src/util/platform';
import { onMounted, reactive, toRefs } from 'vue';

export default {
  name: 'project-type-statistics-board',
  props: {
    projectId: {
      type: String | Number,
      default: '',
    },
  },
  setup(props) {
    const state = reactive({
      listQueryData: {
        totalTaskCount: 0,
        finishedTaskCount: 0,
        unFinishedTaskCount: 0,
        memberNumber: 0,
        totalCostTime: 0,
        totalExpectWorkTime: 0,
      },
    });

    // 获取数据
    const fetchStatisticData = async () => {
      try {
        let ret = await projectStatisticData({
          projectId: props.projectId,
        });

        const { success, data, message } = ret;
        if (!success) return toast(message, 'error');

        state.listQueryData = data;
      } catch (err) {
        console.log('error => fetchStatisticData', err);
      }
    };

    onMounted(() => {
      fetchStatisticData();
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss" scoped>
.project-type-statistics-board {
  &-item {
    margin-bottom: 30px;
  }
  .el-col {
    text-align: center;
  }
  .item-value {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
    margin-bottom: 4px;
    word-wrap: break-word;
  }
  .item-name {
    font-size: 12px;
    color: #595959;
    word-wrap: break-word;
  }
}
</style>